<style lang="scss" scoped>
.navigation {
  position: fixed;
  box-sizing: border-box;
  top: 15rem;
  right: 1rem;
  z-index: 2;
  // background-color: var(--btn_color);
  text-align: center;
  color: #fff;
  font-size: 1.2rem;
  border-radius: 3px;
  .my_tuan:nth-child(1) {
    // margin-bottom: 1rem;
    // border-bottom: 1px solid #fff;
  }
  .my_tuan {
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    width: 100%;
    margin-bottom: 1rem;
    // height: 3rem;
    padding: 0.5rem 0.5rem;
    // line-height: 3rem;
  }
}
</style>
<template>
  <div class="navigation">
    <div class="my_tuan" v-show="shows" @click="merchantsClick">商家</div>
    <div class="my_tuan" v-show="shows" @click="ruelsClick">规则</div>
    <div class="my_tuan" v-show="shows" @click="publishedClick">排行</div>
    <div class="my_tuan" @click="giftClick">奖品</div>
  </div>
</template> 
<script>
import { Tab, Tabs, List, Loading } from "vant";
// import CaseList from "@/components/CaseList.vue";
export default {
  name: "ActivityTabs",
  components: {
    [List.name]: List,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Loading.name]: Loading,
  },
  data() {
    return {};
  },
  props: {
    shows: {
      type: Boolean,
      default: true
    }
  },
  created() {},
  mounted() {},
  methods: {
    merchantsClick() {
      this.$emit('merchantsClick')
    },
    ruelsClick() {
      this.$emit('ruelsClick')
    },
    publishedClick() {
      this.$emit('publishedClick')
    },
    giftClick() {
      this.$emit('giftClick')
    }

  },
};
</script>
